<!--
 * @Author: tian_biao
 * @Date: 2021-08-21 10:41:17
 * @LastEditTime: 2021-08-25 18:54:18
 * @Description: 倒闸操作票列表
-->
<template>
    <div id="defectLib">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left" @click="back" />
                </template>
                <template slot="header_icon">
                    <van-image width="1.2rem" height="1.2rem" :src="icon.sel" />
                </template>
            </Theader>
        </div>
        <van-tabs title-active-color="#0EB295" color="#0EB295" :line-width="lineWidth">
            <van-tab v-for="(item,index) in tabs" :title="item" :key="index">
                <van-row class="bg_4dbfae header search_header" type="flex" justify='space-around'>
                    <van-col span="21">
                        <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                            @search="search" shape="round" background="#F5F6F7" placeholder="请输入关键字">
                        </van-search>
                    </van-col>
                    <van-col span="3" @click="show=true">
                        <div class="searchBtn">筛选</div>
                    </van-col>
                </van-row>
                <div class="tiketListBox">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                            <van-cell v-for="item in list" :key="item" @click="editTicket">
                                <div class="tiketItem">
                                    <div class="titleBox">
                                        黎里变：110kV正母线、19H4坝黎线开关复役黎线开关复役黎线开关复役黎线开关复役
                                    </div>
                                    <div class="titleBox fs05rem fwnormal">
                                        变电倒闸操作票
                                    </div>
                                    <div class="titleBox fs05rem fwnormalTime">
                                        作业地点：交流220kV黎里变
                                    </div>
                                    <div class="titleBox fs05rem fwnormalTime">
                                        预计操作时间：2021-09-27 8:00
                                    </div>
                                    <div class="schduling">退回操作票</div>
                                    <van-icon name="delete-o" size="1.5rem" class="delete" color="#F56C6C" />
                                </div>
                            </van-cell>
                        </van-list>
                    </van-pull-refresh>

                </div>
            </van-tab>
        </van-tabs>
        <div class="btnBox bgcfff">
            <div class="useritem lhnormal fs05rem" @click="backlogTask">
                <van-image width="2rem" height="2rem" fit="contain" :src="icon.daiban" />
                <div>代办任务</div>
            </div>
            <div class="useritem lhnormal fs05rem" @click="revicedCommand">
                <van-image width="2rem" height="2rem" fit="contain" :src="icon.work" />
                <div>工作票</div>
            </div>
            <div class="useritem lhnormal fs05rem">
                <van-image width="2rem" height="2rem" fit="contain" :src="icon.ticket" />
                <div>操作票</div>
            </div>
        </div>
        <div class="drag" v-drag @click="addTicket">+</div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'80%' }">
            <div class="title-bgsx borderBottom">
                <div class="titleText">操作票筛选</div>
                <van-icon name="cross" @click="show=false" />
            </div>
            <div class="searchBox">
                <div class="ticketType">
                    <div class="left"></div>
                    <div class="typeText">票面类型</div>
                </div>
                <div class="borderBottom">
                    <van-dropdown-menu active-color="#1989fa">
                        <van-dropdown-item v-model="value" :options="option" />
                    </van-dropdown-menu>
                </div>
                <div class="ticketType mt1rem">
                    <div class="left"></div>
                    <div class="typeText">作业地点</div>
                </div>
                <div class="borderBottom">
                    <van-search v-model="keyWord2" placeholder="请输入搜索内容" />
                </div>
                <div class="ticketType mt1rem">
                    <div class="left"></div>
                    <div class="typeText">预计操作时间</div>
                </div>
                <div class="borderBottom flex ml1rem">
                    <van-image width="1rem" height="1rem" :src="icon.tourTime" />

                    <van-field v-model="tourTime" readonly placeholder="选择时间范围" />
                </div>
                <div class="ticketType mt1rem">
                    <div class="left"></div>
                    <div class="typeText">监护人</div>
                </div>
                <div class="flex user">
                    <div class="userList flex user mt1rem">
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                    </div>
                    <div class="useritem mt1rem">
                        <van-icon name="add-o" size="2rem" />
                        <div class="addText">添加</div>
                    </div>
                </div>
                <div class="ticketType mt1rem">
                    <div class="left"></div>
                    <div class="typeText">审核人</div>
                </div>
                <div class="flex user">
                    <div class="userList flex user mt1rem">
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                    </div>
                    <div class="useritem mt1rem">
                        <van-icon name="add-o" size="2rem" />
                        <div class="addText">添加</div>
                    </div>
                </div>
                <div class="ticketType mt1rem">
                    <div class="left"></div>
                    <div class="typeText">操作人</div>
                </div>
                <div class="flex user">
                    <div class="userList flex user mt1rem">
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                        <div class="useritem ml1rem">
                            <div class="xing">赵</div>
                            <div class="name">赵小刚</div>
                        </div>
                    </div>
                    <div class="useritem mt1rem">
                        <van-icon name="add-o" size="2rem" />
                        <div class="addText">添加</div>
                    </div>
                </div>
            </div>
            <div class="btnBox">
                <div class="reset">重置</div>
                <div class="save" @click="show=false">确定</div>
            </div>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import Theader from "../component/header"
    import { getDefectDicInfo } from "../../api/defect"
    import { drag } from '../../../../utils/moveBtn'
    export default {
        name: "ticketList",
        directives: {
            drag
        },
        components: {
            Theader
        },
        data() {
            return {
                list: [],
                loading: false,//加载状态
                finished: false,//加载完成
                refreshing: false,
                title: "操作票列表",
                active: 0,// 当前选中
                title1: "操作票筛选",
                tourTime: "",
                value: 0,
                option: [
                    { text: '变电倒闸操作票', value: 0 },
                    { text: '变电安全措施操作票', value: 1 },
                ],
                lineWidth: "3.5rem",// 下划线宽度
                tabs: ['编制中', '待审核', '待接票', '待执行', '待回令', '待归档', '已完结'],
                userId: JSON.parse(localStorage.getItem('userInfo')).userId,
                keyWord: null,// 关键字查询
                keyWord2: null,// 作业地点
                show: false,//筛选
                total: 0,// 总条数
                pageNum: 1,// 当前页
                pageSize: 10,// 每页条数
                icon: {
                    sel: require('../../images/sel.png'),
                    tourTime: require('../../images/tourTime.png'),
                    daiban: require('../../images/daiban.svg'),
                    work: require('../../images/work.svg'),
                    ticket: require('../../images/ticket.svg'),
                },
            }
        },
        created() { },
        mounted() { },
        methods: {

            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },

            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: "tour"
                })
            },

            search() {
                this.defectLibList = []
            },
            backlogTask() {
                this.$router.push({
                    name: "backlogTask"
                })
            },
            revicedCommand() {
                this.$router.push({
                    name: "ticketListWork"
                })
            },
            editTicket() {
                this.$router.push({
                    name: "editTicket"
                })
            },
            /**
              * @description: 查询缺陷库
              * @param {*}
              * @return {*}
              */
            getDefectDicInfo() {
                var self = this
                // 非法字符
                var regExp = /[@#\$%\^&\*\!\！\(\)\（\）\……\￥\&\_\-\——\=\+]+/g
                if (regExp.test(this.keyWord)) {
                    this.$toast("查询内容含非法字符")
                    return
                }
                // var params = {
                //     deviceType: this.deviceTypeId,// 设备类型id
                //     roleCode: "",
                //     userId: this.userId,// 用户id
                //     keyWord: this.keyWord,// 关键字
                //     pageSize: this.pageSize,// 页面条数
                //     pageNum: this.pageNum,// 页码
                // }
                var params = {
                    "pageNum": 1,
                    "pageSize": 10,
                    "deviceType": "0322", "roleCode": "", "userId": "915142429"
                }
                // this.$toast.loading({
                //     duration: 0,//展示时长 0不会消失
                //     message: "正在获取...",
                //     forbidClick: true,//是否禁止背景点击
                //     overlay: true//是否显示背景遮罩层
                // })
            },
            addTicket() { 
                this.$router.push({
                    name:"addTicket"
                })
            },

        },
    }
</script>
<style scoped>
    #defectLib {
        background-color: #F5F6F7 !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .title-bgsx {
        height: 50px;
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }

    .mt1rem {
        margin-top: 1rem;
    }

    .van-search__content--round {
        border-radius: 6px;
        border: 1px solid #ccc;
    }

    .van-search__action {
        display: none;
    }

    .searchBtn {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 3.5rem;
        color: #999;
    }

    .tiketListBox {
        width: 100%;
        height: calc(100vh - 13.2rem);
        overflow-y: auto;
    }

    .tiketItem {
        width: 95%;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0px 0px 2px 0px #ccc;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        position: relative;
    }

    .delete {
        position: absolute;
        right: 4%;
        bottom: 50%;
    }

    .titleBox {
        width: 95%;
        margin: 0 auto;
        /* display: flex; */
        /* color: #999;
        font-weight: 700; */
        font-size: 15px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 0.5rem;
    }

    .fs05rem {
        font-size: 0.5rem;
    }

    .fwnormal {
        font-weight: normal;
        font-size: 13px;
        color: #8f8f94;
    }

    .fwnormalTime {
        font-weight: normal;
        font-size: 13px;
        color: #333;
    }

    .drag {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #0EB295;
        font-size: 3rem;
        text-align: center;
        line-height: 3rem;
        position: absolute;
        bottom: 10%;
        right: 5%;
        color: #ffffff;
        box-shadow: 0px 0px 4px 0px #0EB295;
        z-index: 9999;
    }

    .searchBox {
        height: calc(100vh - 9rem);
        overflow-y: auto;
        padding: 1rem;
    }

    .ticketType {
        display: flex;
        align-items: center;
    }

    .left {
        height: 1rem;
        width: 10px;
        margin-top: 4px;
        border-left: 4px solid #17b49b;
    }

    .typeText {
        text-align: justify;
    }

    .van-dropdown-menu>>>.van-dropdown-menu__bar {
        background-color: #fff !important;
        box-shadow: none !important;
    }

    .van-dropdown-menu>>>.van-dropdown-menu__item {
        display: flex;
        flex: 1;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .borderBottom {
        border-bottom: 1px solid rgb(242, 242, 242);
    }

    .flex {
        display: flex;
        align-items: center;
    }

    .ml1rem {
        margin-left: 1rem;
    }

    .borderBottom>>>.van-cell {
        padding: 10px 6px;
    }

    .van-cell>>>.van-field__left-icon {
        display: none;
    }

    .van-search>>>.van-search__content {
        background-color: #fff;
        height: 2rem;
    }

    .borderBottom>>>.van-search {
        margin-left: -1rem;
    }

    .user {
        justify-content: space-between;
        font-size: 14px;
        color: #999;
    }

    .xing {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: #ffffff;
        text-align: center;
        line-height: 2rem;
        background-color: #007AF6;
    }

    .useritem {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btnBox {
        width: 100%;
        height: 3.8rem;
        box-shadow: 0px 0px 1px 0px #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .btnBox>div {
        height: 80%;
        text-align: center;
        line-height: 3.04rem;
        border-radius: 4px;
    }

    .lhnormal {
        line-height: normal !important;
    }

    .reset {
        flex: 0.3;
        box-shadow: 0px 0px 1px 0px #ccc;
    }

    .save {
        flex: 0.6;
        background-color: #17b49b;
        color: #fff;

    }

    .bgcfff {
        background-color: #fff;
    }

    .schduling {
        width: 100%;
        height: 4rem;
        margin: 0 auto;
        margin-top: 1rem;
        border-radius: 12px;
        background: url("../../images/btnBg.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 4rem;
        font-size: 1.2rem;
        color: #fff;
        font-weight: 600;
    }

    .van-cell {
        background: none !important;
        padding: 0;
    }

    .van-field__body>>>.van-field__control[type=search] {
        -webkit-appearance: none;
        height: 2rem;
    }
</style>